<template>
  <!--    <el-date-picker-->
  <!--        v-bind="$attrs"-->
  <!--        v-model="tempValueCom"-->
  <!--        :value-format="valueFormat"-->
  <!--        @change="handleChange"-->
  <!--        style="max-width: 100%"-->
  <!--    >-->
  <!--    </el-date-picker>-->
  <erp-form-date
    v-model="tempValueCom"
    v-bind="$attrs"
    :props="{
      valueFormat: 'timestamp',
    }"
    :extra="extraCom"
    style="max-width: 100%"
    @value-change="handleChange"
  />
</template>

<script>
import ErpFormDate from '@/components/erp/form/ErpFormDate';
import Vue from 'vue';
import {DatePicker} from "element-ui";
Vue.use(DatePicker);
/**
 * 日期选择
 * @author maolin
 */
export default {
  name: "ErpTableDate",
  components: {
    ErpFormDate,
  },
  model: {
    prop: "value",
    event: 'value-change'
  },
  props: {
    /**
     * 默认值
     * @public
     */
    value: {
      type: [String, Number, Object],
      default: ''
    },
    /**
     * [返回值的类型](https://element.eleme.cn/2.13/#/zh-CN/component/date-picker#attributes)
     * @public
     */
    valueFormat: {
      type: String,
      default: 'timestamp'
    }
  },
  data () {
    return {
      tempValue: null
    };
  },
  computed: {
    extraCom () {
      return {
        unit: "s",
        defaultNow: false
      };
    },
    tempValueCom: {
      get () {
        return this.value;
      },
      set (val) {
        this.handleChange(val);
      }
    }
  },
  watch: {
    value: {
      handler(value) {
        this.tempValue = value;
      },
      immediate: true
    },
  },
  methods: {
    /**
     * 通知父组件更新值
     * @param data 值
     * @public
     */
    handleChange (data) {
      /**
       * 通知父组件更新值
       */
      this.$emit('value-change', data);
    }
  }
};
</script>

<style scoped>

</style>
